<template>
  <div class="el-main">
    <el-container>
      <!-- -->
      <!-- <el-aside width="300px">
         <el-tree class="tree_area" :data="menuTree" node-key="id" ref="tree" :expand-on-click-node="clickNode"
                  :props="defaultProps" :highlight-current="highlightCurrent" @node-click="handleNodeClick"></el-tree>
       </el-aside>-->
      <el-container>
        <el-main class="el-main">
          <el-row>
            <el-col :span="1">
              <el-button type="primary" @click="toAdd()">  <i class="el-icon-circle-plus-outline"></i>新建</el-button>
            </el-col>
          </el-row>
          <el-row style="padding-top: 10px">
            <el-col :span="24">
              <el-row>
                <el-col>
                  <el-table class="el-tab"
                            :data="tableData"
                            border
                            size="mini"
                            style="font-size: 13px"
                            :cell-style="{height:'34px',padding:'0px'}"
                            :header-cell-style="{background:'#f5f6fa',fontWeight:'normal'}">
                    <el-table-column type="index" label="序号" align="center" ></el-table-column>
                    <el-table-column prop="name" label="图片主题" align="center" ></el-table-column>
                    <el-table-column prop="createdDate" label="创建时间" :formatter="dateFormat" align="center" ></el-table-column>
                    <el-table-column prop="createdBy" label="创建人" align="center" ></el-table-column>

                    <el-table-column
                      fixed="right"
                      label="操作"
                      width="200" align="center">
                      <template slot-scope="scope">
                        <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                        <el-button @click.native.prevent="deleteRow(scope.row.id)" type="text" size="small">删除
                        </el-button>
                        <el-button type="text" size="small" @click="moveUpAndDown(scope.row,'up')" v-if="scope.row.autoOrder!=1">上移</el-button>
                        <el-button type="text" size="small" @click="moveUpAndDown(scope.row,'down')" v-if="scope.row.autoOrder!=tableData.length">下移</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <div class="block">
            <el-pagination align="right" style="margin-top: 5px;" @size-change="handleSizeChange"
                           @current-change="handleCurrentChange" :current-page="pageable.page+1"
                           :page-sizes="[10, 20, 30, 40]"
                           :page-size="pageable.size" layout="total, sizes, prev, pager, next, jumper"
                           :total="totalElements">
            </el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import Qs from 'qs';
  import moment from 'moment'
  import {MessageBox, Message} from 'element-ui';

  export default {
    name: "index",
    data() {
      return {
        tableData: [],
        totalElements: 0,
        pageable: {
          page: 0,
          size: 10,
          sort: 'id',
          type:'3',
        },
      }
    },
    created() {
      // this.getMenus()
      this.findByParam()
    },
    watch: {
      'pageable.page': function (val) {
        this.findByParam()
      },
      'pageable.size': function (val) {
        this.findByParam()
      },
      'pageable.type': function (val) {
        this.findByParam()
      },
      'parentId': function (val) {
        //  this.getMenus();
      }
    },
    filters: {
      isKeyDepartment: function (val) {

        if (val === 1) {
          return "是"
        } else {
          return "否"
        }
      },
    },
    methods: {

      // 点击节点触发的方法
      handleNodeClick: function (node) {
        this.pageable.departmentId = node.id;
        //根据节点id获取医生信息
        this.findByParam();
      },

      handleSizeChange(val) {
        this.pageable.size = val;
      },

      handleCurrentChange(val) {
        this.pageable.page = val - 1;
      },

      findByParam() {
        let that = this;
        let data = Qs.stringify(this.pageable)
        this.instance.post('/w/images/s', data)
          .then(function (response) {
            that.totalElements = response.pageable.totalElements;
            that.tableData = response.data;
          })
          .catch(function (error) {
          });
      },


      deleteRow(id) {
        let that = this;
        let confirm = MessageBox.confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          that.instance.delete('/w/images/' + id).then(function (response) {
            Message.success("删除成功")
            that.findByParam()
          })
        }).catch(() => {
          Message.info("取消删除")
        })
      },
      handleClick(row) {

      },
      edit(row) {
        this.$router.push({name: 'environmentAdd', query: {id: row.id}}) // 只能用 name
      },
      toAdd() {
        this.$router.push({name: 'environmentAdd'}) // 只能用 name
      },
      dateFormat: function (row, column) {
        let date = row[column.property];
        if (date === undefined) {
          return ''
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      moveUpAndDown:function (row,flag) {
        let that = this;
        this.instance.post('/w/images/upAndDown/'+flag, row)
          .then(function (response) {
            that.findByParam();
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }
  }
</script>

<style scoped>

</style>
